/*
  学习目标：子传父 - 跟vue 类似
  步骤：
     1. props 是单向的们不能直接修改传递过来的值
     2. 父组件把方法传递给子组件
     3. 子组件调用完，把参数传回来给父组件，从而实现子传父
*/

import React from 'react';
export default class Parent extends React.Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = (num = 1000) => {
    this.setState({
      money: num + this.state.money,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleMakeMoney}>
          爸爸开始赚钱了 - {this.state.money}
        </button>
        <Child
          money={this.state.money}
          handleMakeMoney={this.handleMakeMoney}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    // console.log('this.props -----> ', this.props);
    const { money, handleMakeMoney } = this.props;
    console.log('handleMakeMoney -----> ', handleMakeMoney);
    return (
      <div>
        <h1>爸爸给我钱了：{money} </h1>
        {/* 不要写 this.handleMakeMoney */}
        <button
          onClick={() => {
            handleMakeMoney(2000);
          }}
        >
          点我调用handleMakeMoney，赚钱
        </button>
      </div>
    );
  }
}
